<template>
  <div>
    <el-form :inline="true" :model="q" size="mini">
      <el-form-item label="关联商户:">
        <el-select v-model="q.mch_ids" clearable placeholder="请选择">
          <el-option
            v-for="item in MerchantsList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态:">
        <el-select v-model="q.is_flash" clearable placeholder="请选择">
          <el-option
            v-for="item in status"
            :key="item.label"
            :label="item.label"
            :value="item.text">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="内容搜索:">
        <el-input v-model="q.value" placeholder="请输入内容" prefix-icon="el-icon-edit"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
        <el-button type="danger" @click="reload">重置</el-button>

      </el-form-item>
    </el-form>
    <el-row type="flex" class="row-bg btn-row" justify="end">
      <el-button size="mini" @click="add" type="primary" icon="el-icon-plus">新增公告</el-button>
    </el-row>
    <el-table :data="listData.items" v-loading.body="listLoading" @sort-change="sortlist" size="mini" stripe border fit
              highlight-current-row>
      <el-table-column prop="id" label="ID" width="60" fixed="left"></el-table-column>
      <el-table-column prop="value" :show-overflow-tooltip="true" label='公告内容' sortable
                       min-width="200"></el-table-column>
      <el-table-column prop="mchStr" label='关联商户' sortable min-width="200"></el-table-column>
      <el-table-column prop="created_at" label='创建时间' width="140"></el-table-column>
      <el-table-column prop="start_time" label='开始时间' width="140"></el-table-column>
      <el-table-column prop="end_time" label='结束时间' sortable width="140"></el-table-column>
      <el-table-column prop="status" label='状态' min-width="80">
        <template slot-scope="scope">{{scope.row.status == 1?"可用":"不可用"}}</template>
        </el-table-column>
      <el-table-column prop="updated_at" label="最后修改时间" sortable width="180"></el-table-column>

      <el-table-column label="操作" width="150" fixed="right">
        <template slot-scope="scope">
          <div>
            <el-button type="primary" size="mini" @click="update(scope.row)">编辑</el-button>
            <!--            <el-button type="danger" size="mini" @click="remove(scope.row)">删除</el-button>-->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="q.page_no" :page-sizes="$store.state.app.pageSizeArr"
                     :page-size="q.page_size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="listData.total">
      </el-pagination>
    </div>
    <save-update v-if="showUpdate" :showUpdate.sync="showUpdate" :id="show_id" :Detail="Detail"
                 :BulletinType="BulletinType"
                 :MerchantsList="MerchantsList"></save-update>
  </div>
</template>

<script>
  import saveUpdate from './saveUpdate'
  import {getBulletinList, deleteBulletin, getMerchantsList} from '@/api'

  export default {
    components: {saveUpdate},
    data() {
      return {
        listData: {},
        Detail: {},
        q: {page_size: 30, page_no: 1},
        listLoading: false,
        showUpdate: false,
        settleCycle: this.$store.state.app.settleCycle,
        show_id: null,
        BulletinType: this.$store.state.app.BulletinType,
        MerchantsList: [],
        status: [
          {label: '可用', text: true},
          {label: '不可用', text: false}
        ],
        // mch_ids_Arr: null
      }
    },
    activated() {
      this.getMerchantsList()
      this.getList()
    },
    deactivated() {
      this.listLoading = false
    },
    methods: {
      add() {
        this.show_id = null
        this.showUpdate = true
      },
      resetPwd(row) {
        this.$message.warning('待开发')
      },
      update(row) {
        this.show_id = row.id
        this.showUpdate = true
      },
      remove(row) {
        this.$confirm(`确认删除ID为${row.id}的项么？`, '删除公告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteBulletin(row.id).then(res => {
            if (res.status === 0) {
              this.$message({type: 'success', message: '删除成功!'})
              this.getList()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      query() {
        // if (this.mch_ids_Arr.length != 0) {
        //   this.q.mch_ids = []
        //   this.mch_ids_Arr.forEach(item => {
        //     this.q.mch_ids.push(item)
        //   })
        // }
        this.q = Object.assign(this.q, {page_no: 1, page_size: 30})
        console.log(this.q.mct_ids)
        this.getList()
        console.log(this.q)
      },
      reload() {
        this.q = {page_size: 30, page_no: 1}
        this.getList()
      },
      sortlist(sort) {
        this.q.$orderby = sort.prop
        this.getList()
      },
      handleSizeChange(val) {
        this.q.page_size = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.q.page_no = val
        this.getList()
      },
      getList() {
        var query=Object.assign({},this.q)
        if(!this.q.mch_ids||this.q.mct_ids===null)
        {
          delete this.q.mch_ids
        }
        else
        {
           query=Object.assign({},this.q,{mch_ids:[this.q.mch_ids]})
        }
        if(this.q.is_flash===null)
        {
          delete this.q.is_flash
        }
        if(!this.q.value||this.q.value===null)
        {
          delete this.q.value
        }
        getBulletinList({p:JSON.stringify(query)}).then(res => {
          if (res.status === 0) {
            this.listLoading = false
            this.listData = res.data
            res.data.items.forEach((item, index) => {
              res.data.items[index].mchStr = []
              item.mchs.forEach(mch => {
                res.data.items[index].mchStr.push(mch.name)
              })
              res.data.items[index].mchStr = res.data.items[index].mchStr.toString()
            })
          }
        })
      },
      getMerchantsList() {
        getMerchantsList().then(res => {
          if (res.status === 0) {
            this.MerchantsList = res.data.items
          }
        })
      },
    },
    watch: {
      showUpdate() {
        if (!this.showUpdate) {
          this.getList()
        }
      }
    }
  }
</script>
